<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="wrapper">
      <span>span1</span>
      <div class="box">
        <span>span2</span>
      </div>
    </div>
    <p>ppppp</p>
    <p>ppppp</p>
    <p>ppppp</p>
    <div class="test">test</div>
  </body>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
  <script>
    $(function () {
      //1.选择所有的后元素
      $(".wrapper span").html("这是span新的内容");

      //2.选择子元素
      $(".wrapper>span").html("span1");

      //3.选择紧挨着的相邻兄弟元素
      $(".wrapper+p").css({
        color: "red",
      });

      $(".wrapper+.test").css("color", "pink"); //虽然.test是它的兄弟元素，但不是紧挨着的所有选择不到

      //4.选择所有兄弟元素
      $(".wrapper~.test").css("color", "pink");
      $(".wrapper~p").css("color", "aqua");
    });
  </script>
</html>
